<template>
    <div>
        <myHeader>
            <template #left>
                <div class="left" @click="$router.back()">
                    <i class="iconfont icon-fanhui"></i>
                </div>
            </template>
            <template #center>
                <div class="center">讲师详情</div>
            </template>
            <template #right>
                <div></div>
            </template>
        </myHeader>
        <div class="box">
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="content">
                <img :src="list.avatar" alt="">
                <p>女 年教龄</p>
                <button>取消关注</button>
            </div>
        </div>

        <div class="tab">
            <van-tabs v-model="active">
                <van-tab title="讲师介绍">讲师介绍</van-tab>
                <van-tab title="主讲课程">主讲课程</van-tab>
                <van-tab title="学员评价">
                    <img src="http://xl.9yuecloud.com/assets/img/empty.0d284c2e.png" alt="">
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import { Tab, Tabs } from 'vant';
    import myHeader from "../common/myHeader.vue";
    import { teachDetail } from '../../request/http.js'
    export default {
        data() {
            return {
                active: 0,
                id:this.$route.query.id,
                list:{}
            }
        },
        components: {
            myHeader,
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
        },
        created() {
            teachDetail(this.id).then(res=>{
                console.log(res);
                this.list = res.teacher
            })
        },
    }
</script>

<style lang="scss" scoped>
    .myHeader {
        width: 100%;
        height: 1.2rem;
        background-color: #5ba2f4;
        color: #fff;

        .center {
            font-size: .46rem;
        }
    }

    .box {
        width: 100%;
        height: 200px;
        margin-top: -2px;
        position: relative;

        .top,
        .bottom {
            height: 50%;
        }

        .top {
            background-color: #5ba2f4;
        }

        .content {
            background-color: #fff;
            width: 96%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 200px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin-right: 15px;
            }
            p{
                flex: 1;
            }
            button{
                border: 0px;
                outline: none;
                background-color: #ebeefe;
                color: red;
                padding: 10px 15px;
                border-radius: 25px;
            }
        }
    }

    .tab {
        width: 100%;
        margin: 30px 0;
        text-align: center;

        img {
            width: 100%;
            height: 780px;
            background-color: #fff;
        }
    }
</style>